import { Group, Boxs, Button,Avatar} from 'saltui';
const { Box ,VBox} = Boxs;
const avatarColors = ['#38adff'];
import './PageDemo.less'
export default class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
    }

     dd.biz.navigation.setMenu({
          backgroundColor : "#ADD8E6",
          textColor : "#ADD8E611",
          items : [
            {
              "id":"1",//字符串
              "iconId":"",//字符串，图标命名
              "text":" "
            }
        ],
          onSuccess: function(data) {
        
        },
        onFail: function(err) {

        }
      });

     dd.biz.navigation.setTitle({
          title : '使用帮助',//控制标题文本，空字符串表示显示默认文本
          onSuccess : function(result) {
            
              /*结构
              {
              }*/
          },
          onFail : function(err) {}
        });
  }

  render() {
    let t=this;
    return <div className=" t-PR14 t-PL14 t-PT10 t-PB10 t-LH1_5 t-BCf">
      <div className="t-MB10">
          <Button type="minor">使用之前，管理员需要做的</Button>           
      </div>
          
      <Group className="t-self-group-wrapper t-MB10">
        <h2 className="t-list-title t-FBH">
        <Avatar name="1" filter={prevName => prevName} colors={avatarColors} size={24} fontSize={16} className="t-MR4" />        
        <span style={{ color:'#'+'38ADFF'}}>进入会议管理应用</span>
        </h2>
        <VBox className=" t-PT10 t-PB10 t-FS14">
          <Box>
            <p>
              欢迎使用FlexOffice会议管理应用，首次使用前，请管理员通过钉钉PC客户端>>工作台进入会议管理应用。
            </p>
          </Box>
        </VBox>
      </Group>

       <Group className="t-self-group-wrapper t-MB10">
        <h2 className="t-list-title t-FBH">
        <Avatar name="2" filter={prevName => prevName} colors={avatarColors} size={24} fontSize={16} className="t-MR4" />        
        <span style={{ color:'#'+'38ADFF'}}>完成会议室类型的设置</span>
        </h2>
        <VBox className=" t-PT10 t-PB10 t-FS14">
          <Box>
            <p>
              进入会议设置>>会议类型设置菜单，录入会议类型信息。
            </p>
          </Box>
        </VBox>
        <div className="help-repair-img-list" vAlign="center" hAlign="center" >
        
           <img src="../../../fmui/images/meeting_01.png" alt=""/>
        
        </div>
      </Group>
       <Group className="t-self-group-wrapper t-MB10">
        <h2 className="t-list-title t-FBH">
        <Avatar name="3" filter={prevName => prevName} colors={avatarColors} size={24} fontSize={16} className="t-MR4" />        
        <span style={{ color:'#'+'38ADFF'}}>完成会议服务的设置</span>
        </h2>
        <VBox className=" t-PT10 t-PB10 t-FS14">
          <Box>
            <p>
              进入会议设置>>会议服务菜单，录入会议服务信息。
            </p>
          </Box>
        </VBox>
        <div className="help-repair-img-list" vAlign="center" hAlign="center" >
        
           <img src="../../../fmui/images/meeting_02.png" alt=""/>
        
        </div>
      </Group>

      <Group className="t-self-group-wrapper t-MB10">
        <h2 className="t-list-title t-FBH">
        <Avatar name="4" filter={prevName => prevName} colors={avatarColors} size={24} fontSize={16} className="t-MR4" />        
        <span style={{ color:'#'+'38ADFF'}}>完成会议相关的基础设置</span>
        </h2>
        <VBox className=" t-PT10 t-PB10 t-FS14">
          <Box>
            <p>
            进入会议设置>>基础设置菜单，完成会议提醒和提醒方式设置。
           </p>
          </Box>
        </VBox> 
        <div className="help-repair-img-list" vAlign="center" hAlign="center" >
        
           <img src="../../../fmui/images/meeting_03.png" alt=""/>
        
        </div>    
      </Group>

      <Group className="t-self-group-wrapper t-MB10">
        <h2 className="t-list-title t-FBH">
        <Avatar name="5" filter={prevName => prevName} colors={avatarColors} size={24} fontSize={16} className="t-MR4" />        
        <span style={{ color:'#'+'38ADFF'}}>完成会议室信息的设置</span>
        </h2>
        <VBox className=" t-PT10 t-PB10 t-FS14">
          <Box>
            <p>
            管理员进入会议管理应用后，首先需要进入会议设置>>会议室管理菜单，录入会议室信息。
           </p>
          </Box>
        </VBox> 
        <div className="help-repair-img-list" vAlign="center" hAlign="center" >
           <img src="../../../fmui/images/meeting_04.png" alt=""/>
        </div>   
        <VBox className=" t-PT10 t-PB10 t-FS14">
          <Box>
            <p>
            新建会议室，填入会议室名称、地址、管理员、会议室类型等信息，选择该会议室可提供的会议服务，设置会议室是否需要审批，并关联审批流程，点击保存，审批流程可在流程管理中进行配置。
           </p>
          </Box>
        </VBox>
        <div className="help-repair-img-list" vAlign="center" hAlign="center" >
           <img src="../../../fmui/images/meeting_17.png" alt=""/>
        </div>     
      </Group>
    </div>
  }
};
